<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/common.css?v=1.0.0" />
    <link rel="stylesheet" href="css/main.css?v=1.0.0">
    <script src="js/rem.js"></script>
    <script src="js/zepto.js"></script>
    <title>财富中心</title>
</head>

<body>
    <div class="header">
        <img src="img/left-white.png" alt="">
        <span class="header-title">推荐</span>
        <button class="buy buy-small positonFixed1">全部已读</button>
    </div>
    <div class="recom-container navFixed">
        <div class="recom-nav fixed-con">
            <span class="active">全部</span>
            <span>活动 <i>4</i> </span>
            <span>通知</span>
            <span>新闻</span>
        </div>

        <div class="recom-content v-load">
            <div class="wrapper">
                
                <div class="recom-wrap">
                    <span class="dot"></span>
                    <div>
                        <div class="l">
                            <img src="img/recom01.jpg" alt="">
                        </div>
                        <div class="r">
                            <h3>炼·工厂全体课程全新升级</h3>
                            <p>从下周开始,炼·工厂全体课程全新升级,每周开展70科目</p>
                            <div class="time-con">
                                <span class="time-img"></span>
                                <span class="time">2018-11-03</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="recom-wrap red">
                    <span class="dot"></span>
                    <div>
                        <h3>炼·工厂全体课程全新升级</h3>
                        <p>从下周开始,炼·工厂全体课程全周开始,炼·工厂全体课程全新升新升级,每周开展70科目</p>
                        <div class="time-con">
                            <span class="time-img"></span>
                            <span class="time">2018-11-03</span>
                        </div>
                    </div>
                </div>
                <div class="recom-wrap">
                    <span class="dot"></span>
                    <div>
                        <div class="l">
                            <img src="img/recom01.jpg" alt="">
                        </div>
                        <div class="r">
                            <h3>炼·工厂全体课程全新升级</h3>
                            <p>从下周开始,炼·工厂全体课程全新升级,每周开展70科目</p>
                            <div class="time-con">
                                <span class="time-img"></span>
                                <span class="time">2018-11-03</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="recom-wrap red">
                    <span class="dot"></span>
                    <div>
                        <h3>炼·工厂全体课程全新升级</h3>
                        <p>从下周开始,炼·工厂全体课程全周开始,炼·工厂全体课程全新升新升级,每周开展70科目</p>
                        <div class="time-con">
                            <span class="time-img"></span>
                            <span class="time">2018-11-03</span>
                        </div>
                    </div>
                </div>
                <div class="recom-wrap">
                    <span class="dot"></span>
                    <div>
                        <div class="l">
                            <img src="img/recom01.jpg" alt="">
                        </div>
                        <div class="r">
                            <h3>炼·工厂全体课程全新升级</h3>
                            <p>从下周开始,炼·工厂全体课程全新升级,每周开展70科目</p>
                            <div class="time-con">
                                <span class="time-img"></span>
                                <span class="time">2018-11-03</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="recom-wrap red">
                    <span class="dot"></span>
                    <div>
                        <h3>炼·工厂全体课程全新升级</h3>
                        <p>从下周开始,炼·工厂全体课程全周开始,炼·工厂全体课程全新升新升级,每周开展70科目</p>
                        <div class="time-con">
                            <span class="time-img"></span>
                            <span class="time">2018-11-03</span>
                        </div>
                    </div>
                </div>
                <div class="recom-wrap">
                    <span class="dot"></span>
                    <div>
                        <div class="l">
                            <img src="img/recom01.jpg" alt="">
                        </div>
                        <div class="r">
                            <h3>炼·工厂全体课程全新升级</h3>
                            <p>从下周开始,炼·工厂全体课程全新升级,每周开展70科目</p>
                            <div class="time-con">
                                <span class="time-img"></span>
                                <span class="time">2018-11-03</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="recom-wrap red">
                    <span class="dot"></span>
                    <div>
                        <h3>炼·工厂全体课程全新升级</h3>
                        <p>从下周开始,炼·工厂全体课程全周开始,炼·工厂全体课程全新升新升级,每周开展70科目</p>
                        <div class="time-con">
                            <span class="time-img"></span>
                            <span class="time">2018-11-03</span>
                        </div>
                    </div>
                </div>
                <div class="recom-wrap">
                    <span class="dot"></span>
                    <div>
                        <div class="l">
                            <img src="img/recom01.jpg" alt="">
                        </div>
                        <div class="r">
                            <h3>炼·工厂全体课程全新升级</h3>
                            <p>从下周开始,炼·工厂全体课程全新升级,每周开展70科目</p>
                            <div class="time-con">
                                <span class="time-img"></span>
                                <span class="time">2018-11-03</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="recom-wrap red">
                    <span class="dot"></span>
                    <div>
                        <h3>炼·工厂全体课程全新升级</h3>
                        <p>从下周开始,炼·工厂全体课程全周开始,炼·工厂全体课程全新升新升级,每周开展70科目</p>
                        <div class="time-con">
                            <span class="time-img"></span>
                            <span class="time">2018-11-03</span>
                        </div>
                    </div>
                </div>
                <div class="recom-wrap">
                    <span class="dot"></span>
                    <div>
                        <div class="l">
                            <img src="img/recom01.jpg" alt="">
                        </div>
                        <div class="r">
                            <h3>炼·工厂全体课程全新升级</h3>
                            <p>从下周开始,炼·工厂全体课程全新升级,每周开展70科目</p>
                            <div class="time-con">
                                <span class="time-img"></span>
                                <span class="time">2018-11-03</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="recom-wrap red">
                    <span class="dot"></span>
                    <div>
                        <h3>炼·工厂全体课程全新升级</h3>
                        <p>从下周开始,炼·工厂全体课程全周开始,炼·工厂全体课程全新升新升级,每周开展70科目</p>
                        <div class="time-con">
                            <span class="time-img"></span>
                            <span class="time">2018-11-03</span>
                        </div>
                    </div>
                </div>
                <div class="recom-wrap">
                    <span class="dot"></span>
                    <div>
                        <div class="l">
                            <img src="img/recom01.jpg" alt="">
                        </div>
                        <div class="r">
                            <h3>炼·工厂全体课程全新升级</h3>
                            <p>从下周开始,炼·工厂全体课程全新升级,每周开展70科目</p>
                            <div class="time-con">
                                <span class="time-img"></span>
                                <span class="time">2018-11-03</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="recom-wrap red">
                    <span class="dot"></span>
                    <div>
                        <h3>炼·工厂全体课程全新升级</h3>
                        <p>从下周开始,炼·工厂全体课程全周开始,炼·工厂全体课程全新升新升级,每周开展70科目</p>
                        <div class="time-con">
                            <span class="time-img"></span>
                            <span class="time">2018-11-03</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="place"></div>
    <div class="tab-bar">
        <a class="tab home" href="">
            <span><img src="img/tab-bar01.png" alt=""></span>
            <span>首页</span>
        </a>
        <a class="tab active" href="recommend.html">
            <span><img src="img/tab-bar02-active.png" alt=""></span>
            <span>推荐</span>
        </a>
        <a class="tab " href="my.html">
            <span><img src="img/tab-bar03.png" alt=""></span>
            <span>我的</span>
        </a>
    </div>
</body>

</html>
<script src="js/main.js?v=1.0.0"></script>
<!-- <script src="js/iscroll.js"></script> -->
<script>
    let flag = true;
    let mock = null;
    //滚动加载函数
    function loadmore(height = 200, callback) {
        $(window).scroll(function () {
            let scrollTop = $(this).scrollTop();
            let scrollHeight = $(document).height();
            let windowHeight = $(this).height();
            console.log(scrollTop, scrollHeight, windowHeight)
            if (scrollTop + windowHeight + height >= scrollHeight) {
                if (flag) {
                    flag = !flag
                    console.log('开始ajax请求,请求完成变成1')
                    callback()
                }
            }
        });
    }
    // 调用加载
    loadmore(300,ajaxData)
    // 后台接口加载数据函数
    function ajaxData() {
        setTimeout(function () {
            flag = !flag  //必备
            console.log('我变成1了');
            $('.v-load').append(mock)
        }, 1000)
    }
    // 模拟数据
    function mockData() {
        mock =
            `
    <div class="recom-wrap">
                <span class="dot"></span>
                <div>
                    <div class="l">
                        <img src="img/recom01.jpg" alt="">
                    </div>
                    <div class="r">
                        <h3>炼·工厂全体课程全新升级</h3>
                        <p>从下周开始,炼·工厂全体课程全新升级,每周开展70科目</p>
                        <div class="time-con">
                            <span class="time-img"></span>
                            <span class="time">2018-11-03</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="recom-wrap red">
                <span class="dot"></span>
                <div>
                    <h3>炼·工厂全体课程全新升级</h3>
                    <p>从下周开始,炼·工厂全体课程全周开始,炼·工厂全体课程全新升新升级,每周开展70科目</p>
                    <div class="time-con">
                        <span class="time-img"></span>
                        <span class="time">2018-11-03</span>
                    </div>
                </div>
            </div>
            <div class="recom-wrap">
                <span class="dot"></span>
                <div>
                    <div class="l">
                        <img src="img/recom01.jpg" alt="">
                    </div>
                    <div class="r">
                        <h3>炼·工厂全体课程全新升级</h3>
                        <p>从下周开始,炼·工厂全体课程全新升级,每周开展70科目</p>
                        <div class="time-con">
                            <span class="time-img"></span>
                            <span class="time">2018-11-03</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="recom-wrap red">
                <span class="dot"></span>
                <div>
                    <h3>炼·工厂全体课程全新升级</h3>
                    <p>从下周开始,炼·工厂全体课程全周开始,炼·工厂全体课程全新升新升级,每周开展70科目</p>
                    <div class="time-con">
                        <span class="time-img"></span>
                        <span class="time">2018-11-03</span>
                    </div>
                </div>
            </div>
            <div class="recom-wrap">
                <span class="dot"></span>
                <div>
                    <div class="l">
                        <img src="img/recom01.jpg" alt="">
                    </div>
                    <div class="r">
                        <h3>炼·工厂全体课程全新升级</h3>
                        <p>从下周开始,炼·工厂全体课程全新升级,每周开展70科目</p>
                        <div class="time-con">
                            <span class="time-img"></span>
                            <span class="time">2018-11-03</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="recom-wrap red">
                <span class="dot"></span>
                <div>
                    <h3>炼·工厂全体课程全新升级</h3>
                    <p>从下周开始,炼·工厂全体课程全周开始,炼·工厂全体课程全新升新升级,每周开展70科目</p>
                    <div class="time-con">
                        <span class="time-img"></span>
                        <span class="time">2018-11-03</span>
                    </div>
                </div>
            </div>
    `


    }
    mockData()
</script>